<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>库存管理</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="mx-auto max-w-[393px] h-[852px] bg-white relative overflow-hidden rounded-[40px] shadow-2xl">
        <!-- Status Bar -->
        <div class="bg-white px-6 pt-3 pb-2">
            <div class="flex justify-between items-center text-xs">
                <span class="font-semibold">9:41</span>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>
        </div>

        <!-- Header -->
        <div class="bg-gradient-to-r from-orange-500 to-red-500 px-4 py-3">
            <div class="flex items-center justify-between text-white">
                <a href="notifications.html" class="text-white">
                    <i class="fas fa-arrow-left text-lg"></i>
                </a>
                <h1 class="text-lg font-semibold">库存管理</h1>
                <button onclick="addProduct()" class="text-white">
                    <i class="fas fa-plus text-lg"></i>
                </button>
            </div>
        </div>

        <!-- Inventory Stats -->
        <div class="px-4 py-3 bg-gradient-to-r from-orange-500 to-red-500">
            <div class="bg-white/10 backdrop-blur-sm rounded-xl p-3">
                <div class="grid grid-cols-4 gap-3 text-white text-center">
                    <div>
                        <p class="text-lg font-bold">156</p>
                        <p class="text-xs opacity-80">总商品</p>
                    </div>
                    <div>
                        <p class="text-lg font-bold text-red-300">8</p>
                        <p class="text-xs opacity-80">库存预警</p>
                    </div>
                    <div>
                        <p class="text-lg font-bold">3</p>
                        <p class="text-xs opacity-80">缺货</p>
                    </div>
                    <div>
                        <p class="text-lg font-bold">¥89K</p>
                        <p class="text-xs opacity-80">库存价值</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Filter Options -->
        <div class="px-4 py-2 bg-white border-b border-gray-200">
            <div class="flex space-x-2 overflow-x-auto">
                <button onclick="filterInventory('all')" id="filter-all" class="bg-orange-500 text-white text-xs px-3 py-2 rounded-lg whitespace-nowrap">
                    全部商品
                </button>
                <button onclick="filterInventory('warning')" id="filter-warning" class="bg-gray-100 text-gray-600 text-xs px-3 py-2 rounded-lg whitespace-nowrap">
                    库存预警
                </button>
                <button onclick="filterInventory('outofstock')" id="filter-outofstock" class="bg-gray-100 text-gray-600 text-xs px-3 py-2 rounded-lg whitespace-nowrap">
                    缺货商品
                </button>
                <button onclick="filterInventory('bestseller')" id="filter-bestseller" class="bg-gray-100 text-gray-600 text-xs px-3 py-2 rounded-lg whitespace-nowrap">
                    热销商品
                </button>
            </div>
        </div>

        <!-- Inventory List -->
        <div class="h-[calc(852px-240px)] overflow-y-auto pb-24">
            <div class="p-4">
                <!-- Warning Item 1 -->
                <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-3">
                    <div class="flex items-start">
                        <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=60&h=60&fit=crop" 
                             alt="商品" class="w-15 h-15 rounded-lg object-cover mr-3">
                        <div class="flex-1">
                            <div class="flex items-start justify-between mb-2">
                                <div>
                                    <h4 class="text-sm font-medium">无线蓝牙耳机 Pro Max</h4>
                                    <p class="text-xs text-gray-500">SKU: BT001</p>
                                </div>
                                <div class="text-right">
                                    <span class="bg-yellow-100 text-yellow-600 text-xs px-2 py-1 rounded-full">库存预警</span>
                                </div>
                            </div>
                            
                            <div class="grid grid-cols-2 gap-4 text-xs mb-3">
                                <div>
                                    <span class="text-gray-500">当前库存</span>
                                    <p class="font-bold text-yellow-600">5件</p>
                                </div>
                                <div>
                                    <span class="text-gray-500">预警线</span>
                                    <p class="font-medium">10件</p>
                                </div>
                                <div>
                                    <span class="text-gray-500">成本价</span>
                                    <p class="font-medium">¥200</p>
                                </div>
                                <div>
                                    <span class="text-gray-500">售价</span>
                                    <p class="font-medium">¥599</p>
                                </div>
                            </div>

                            <div class="flex space-x-2">
                                <button onclick="restockProduct('BT001')" class="flex-1 bg-orange-500 text-white text-xs py-2 rounded-lg">
                                    <i class="fas fa-plus mr-1"></i>补货
                                </button>
                                <button onclick="editProduct('BT001')" class="bg-gray-100 text-gray-600 text-xs px-3 py-2 rounded-lg">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button onclick="viewSalesData('BT001')" class="bg-blue-100 text-blue-600 text-xs px-3 py-2 rounded-lg">
                                    <i class="fas fa-chart-line"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Out of Stock Item -->
                <div class="bg-red-50 border border-red-200 rounded-lg p-4 mb-3">
                    <div class="flex items-start">
                        <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=60&h=60&fit=crop" 
                             alt="商品" class="w-15 h-15 rounded-lg object-cover mr-3">
                        <div class="flex-1">
                            <div class="flex items-start justify-between mb-2">
                                <div>
                                    <h4 class="text-sm font-medium">智能手表 Series 6</h4>
                                    <p class="text-xs text-gray-500">SKU: SW001</p>
                                </div>
                                <div class="text-right">
                                    <span class="bg-red-100 text-red-600 text-xs px-2 py-1 rounded-full">缺货</span>
                                </div>
                            </div>
                            
                            <div class="grid grid-cols-2 gap-4 text-xs mb-3">
                                <div>
                                    <span class="text-gray-500">当前库存</span>
                                    <p class="font-bold text-red-600">0件</p>
                                </div>
                                <div>
                                    <span class="text-gray-500">预计到货</span>
                                    <p class="font-medium">1月10日</p>
                                </div>
                                <div>
                                    <span class="text-gray-500">成本价</span>
                                    <p class="font-medium">¥800</p>
                                </div>
                                <div>
                                    <span class="text-gray-500">售价</span>
                                    <p class="font-medium">¥1299</p>
                                </div>
                            </div>

                            <div class="flex space-x-2">
                                <button onclick="restockProduct('SW001')" class="flex-1 bg-red-500 text-white text-xs py-2 rounded-lg">
                                    <i class="fas fa-exclamation-triangle mr-1"></i>紧急补货
                                </button>
                                <button onclick="pauseSales('SW001')" class="bg-gray-100 text-gray-600 text-xs px-3 py-2 rounded-lg">
                                    <i class="fas fa-pause"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Normal Stock Item -->
                <div class="bg-white border border-gray-200 rounded-lg p-4 mb-3">
                    <div class="flex items-start">
                        <img src="https://images.unsplash.com/photo-1484704849700-f032a568e944?w=60&h=60&fit=crop" 
                             alt="商品" class="w-15 h-15 rounded-lg object-cover mr-3">
                        <div class="flex-1">
                            <div class="flex items-start justify-between mb-2">
                                <div>
                                    <h4 class="text-sm font-medium">便携充电宝 20000mAh</h4>
                                    <p class="text-xs text-gray-500">SKU: PB001</p>
                                </div>
                                <div class="text-right">
                                    <span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded-full">库存正常</span>
                                </div>
                            </div>
                            
                            <div class="grid grid-cols-2 gap-4 text-xs mb-3">
                                <div>
                                    <span class="text-gray-500">当前库存</span>
                                    <p class="font-bold text-green-600">156件</p>
                                </div>
                                <div>
                                    <span class="text-gray-500">7天销量</span>
                                    <p class="font-medium">23件</p>
                                </div>
                                <div>
                                    <span class="text-gray-500">成本价</span>
                                    <p class="font-medium">¥30</p>
                                </div>
                                <div>
                                    <span class="text-gray-500">售价</span>
                                    <p class="font-medium">¥89</p>
                                </div>
                            </div>

                            <div class="flex space-x-2">
                                <button onclick="adjustStock('PB001')" class="flex-1 bg-blue-500 text-white text-xs py-2 rounded-lg">
                                    <i class="fas fa-sync mr-1"></i>调整库存
                                </button>
                                <button onclick="editProduct('PB001')" class="bg-gray-100 text-gray-600 text-xs px-3 py-2 rounded-lg">
                                    <i class="fas fa-edit"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Bestseller Item -->
                <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-3">
                    <div class="flex items-start">
                        <img src="https://images.unsplash.com/photo-1585298723682-7115561c51b7?w=60&h=60&fit=crop" 
                             alt="商品" class="w-15 h-15 rounded-lg object-cover mr-3">
                        <div class="flex-1">
                            <div class="flex items-start justify-between mb-2">
                                <div>
                                    <h4 class="text-sm font-medium">无线键盘鼠标套装</h4>
                                    <p class="text-xs text-gray-500">SKU: KB001</p>
                                </div>
                                <div class="text-right">
                                    <span class="bg-blue-100 text-blue-600 text-xs px-2 py-1 rounded-full">热销商品</span>
                                </div>
                            </div>
                            
                            <div class="grid grid-cols-2 gap-4 text-xs mb-3">
                                <div>
                                    <span class="text-gray-500">当前库存</span>
                                    <p class="font-bold text-blue-600">68件</p>
                                </div>
                                <div>
                                    <span class="text-gray-500">7天销量</span>
                                    <p class="font-medium text-red-600">45件</p>
                                </div>
                                <div>
                                    <span class="text-gray-500">成本价</span>
                                    <p class="font-medium">¥50</p>
                                </div>
                                <div>
                                    <span class="text-gray-500">售价</span>
                                    <p class="font-medium">¥159</p>
                                </div>
                            </div>

                            <div class="flex space-x-2">
                                <button onclick="restockProduct('KB001')" class="flex-1 bg-blue-500 text-white text-xs py-2 rounded-lg">
                                    <i class="fas fa-fire mr-1"></i>增加备货
                                </button>
                                <button onclick="promotionSettings('KB001')" class="bg-green-100 text-green-600 text-xs px-3 py-2 rounded-lg">
                                    <i class="fas fa-tags"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Filter inventory by category
        function filterInventory(category) {
            // Remove active styles from all filter buttons
            document.querySelectorAll('[id^="filter-"]').forEach(btn => {
                btn.classList.remove('bg-orange-500', 'text-white');
                btn.classList.add('bg-gray-100', 'text-gray-600');
            });
            
            // Add active styles to selected button
            document.getElementById('filter-' + category).classList.remove('bg-gray-100', 'text-gray-600');
            document.getElementById('filter-' + category).classList.add('bg-orange-500', 'text-white');
            
            // In a real app, this would filter the inventory list
            showToast('筛选：' + getFilterName(category));
        }

        function getFilterName(category) {
            const names = {
                'all': '全部商品',
                'warning': '库存预警',
                'outofstock': '缺货商品',
                'bestseller': '热销商品'
            };
            return names[category] || '全部商品';
        }

        // Add new product
        function addProduct() {
            alert('添加新商品\n将跳转到商品添加页面...\n\n功能包括：\n• 商品基本信息\n• 价格设置\n• 库存设置\n• 规格管理');
        }

        // Restock product
        function restockProduct(sku) {
            const quantity = prompt('请输入补货数量:', '50');
            if (quantity && !isNaN(quantity) && quantity > 0) {
                alert(`商品 ${sku} 补货成功\n补货数量: ${quantity}件\n预计到账: 1-3个工作日`);
                showToast('补货申请已提交');
            }
        }

        // Edit product
        function editProduct(sku) {
            alert(`编辑商品 ${sku}\n将跳转到商品编辑页面...\n\n可编辑内容：\n• 商品信息\n• 价格调整\n• 库存设置\n• 上下架状态`);
        }

        // Adjust stock
        function adjustStock(sku) {
            const adjustment = prompt('调整库存数量\n正数为增加，负数为减少:', '0');
            if (adjustment && !isNaN(adjustment) && adjustment !== '0') {
                const action = parseInt(adjustment) > 0 ? '增加' : '减少';
                alert(`库存调整成功\n商品: ${sku}\n${action}: ${Math.abs(adjustment)}件`);
                showToast('库存已调整');
            }
        }

        // View sales data
        function viewSalesData(sku) {
            alert(`查看销售数据\n商品: ${sku}\n\n将显示：\n• 销售趋势\n• 库存周转率\n• 利润分析\n• 补货建议`);
        }

        // Pause sales
        function pauseSales(sku) {
            if (confirm(`确定暂停销售商品 ${sku}？\n暂停后买家将无法下单`)) {
                alert('商品已暂停销售\n可在商品管理中重新上架');
                showToast('商品已暂停销售');
            }
        }

        // Promotion settings
        function promotionSettings(sku) {
            alert(`设置促销活动\n商品: ${sku}\n\n可设置：\n• 限时折扣\n• 满减活动\n• 组合套餐\n• 会员专享`);
        }

        // Show toast message
        function showToast(message) {
            const toast = document.createElement('div');
            toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg text-sm z-50';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.remove();
            }, 2000);
        }

        // Initialize page
        document.addEventListener('DOMContentLoaded', function() {
            filterInventory('all');
        });
    </script>
</body>
</html>